<script setup lang="ts">
import {DescriptionsTree} from "@/interfaces/components/Descriptions";
import {Authentication} from "@/interfaces/views/vehicle/shipper";
import {defineEmits, h, ref} from "vue";
import CdlDescriptions from "@/components/descriptions";
import CdlImage from "@/components/Image"
import {ElButton, ElLoading, ElMessageBox} from "element-plus"
import constant from "@/utils/constant";
import {useGetShipperInfoApi, useShipperAuthenticationApi} from "@/api/vehicle/shipper";
import {ElMessage} from "element-plus/es";

const props = defineProps({
  id:{
    required: true,
    type: String
  },
  query: {
    required: true,
    type: Function
  }
})
const emit = defineEmits(["close"])
const loading = ElLoading.service({
  lock: true,
  text: 'Loading',
  background: 'rgb(255,255,255, 0.9)',
})

init()
const authDescriptionsTree: DescriptionsTree<Authentication> = [
  {label: "托运人(企业)全称", prop: "name", minWidth: 300},
  {label: "统一社会信用代码或个人证件号", prop: "idNum", minWidth: 400},
  {label: "企业法人姓名", prop: "legalPerson", minWidth: 250},
  {label: "企业法人联系方式", prop: "legalPersonPhone"},
  {label: "企业通信地址", prop: "address", span: 2},
  {label: "法人身份证(正面)", prop: "legalPersonIdCardImg", slot: (id) =>{
      return h(CdlImage, {
        previewSrcList: [constant.downloadUrl + id],
        src: constant.downloadUrl + id,
      })
    }},
  {label: "托运联系人身份证(正面)", prop: "contactIdCardImg", slot: (id) =>{
      return h(CdlImage, {
        previewSrcList: [constant.downloadUrl + id],
        src: constant.downloadUrl + id,
      })
    }},
  {label: "营业执照", prop: "businessLicenseImg", slot: (id) =>{
      return h(CdlImage, {
        previewSrcList: [constant.downloadUrl + id],
        src: constant.downloadUrl + id,
      })
    }}
]
const authData = ref({})
function init(){
  useGetShipperInfoApi(props.id).then(res => {
    authData.value = res.data
    loading.close()
  })
}

/**
 * 同意
 */
function ratify(){
  useShipperAuthenticationApi({
    id: props.id,
    status: 2
  }).then(()=>{
    ElMessage.success("认证成功！")
    emit("close")
    props.query({
      status: 3
    })
  })
}

/**
 * 驳回
 */
function reject(){
  ElMessageBox.prompt('', '请填写驳回原因', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
  }).then(({ value }) => {
        useShipperAuthenticationApi({
          id: props.id,
          status: 1,
          overruleCause: value
        }).then(()=>{
          ElMessage.success("驳回成功！")
          emit("close")
          props.query({
            status: 3
          })
        })
      })
}
</script>

<template>
  <h3 style="margin-bottom: 10px">认证人：<span style="margin-left: 15px">{{ authData.name }}</span></h3>
  <CdlDescriptions :model="authData" :template-tree="authDescriptionsTree"></CdlDescriptions>
  <div style="text-align: center; margin-top: 15px">
    <ElButton type="primary" @click="ratify" v-auth="'vehicle:shipper:auth'">同意</ElButton>
    <ElButton type="danger" @click="reject" v-auth="'vehicle:shipper:auth'">驳回</ElButton>
  </div>
</template>
